import {ScrollView, StyleSheet, Text, View} from "react-native";
import * as React from "react";
import AutoHeightImage from "@/components/AutoHeightImage";
import {scaleSize} from "@/utils/screenSize";


const introComponent = function ({ detail }) {
    return (
        <ScrollView>
            <View style={{ backgroundColor: "#fff" }}>
                {/*<View style={styles.introDescrtion}>*/}
                {/*   <TouchableOpacity>*/}
                {/*       <View style={styles.header}>*/}
                {/*           <View style={styles.headerTag}>*/}
                {/*               <Text style={styles.headerTagText}>总群</Text>*/}
                {/*           </View>*/}
                {/*           <View style={styles.title}>*/}
                {/*               <Text>娱池</Text>*/}
                {/*           </View>*/}
                {/*           <View>*/}
                {/*               <Text>桌游研叼社</Text>*/}
                {/*           </View>*/}
                {/*       </View>*/}
                {/*   </TouchableOpacity>*/}
                {/*    <View>*/}
                {/*        <AntDesign name="right" size={10} color="#9C9EAC" />*/}
                {/*    </View>*/}
                {/*</View>*/}
                <View style={styles.activitydescription}>
                    <View style={styles.activityDescTitle}>
                        <Text style={styles.activityDescTitleText}>
                            社群介绍
                        </Text>
                        <View style={[styles.activityTitleHeng, { width: '社群介绍'.length * 16 }]}></View>
                    </View>
                    <View style={{ paddingHorizontal: 12, }}>
                        <Text style={styles.activityDes}>
                            { detail?.introduce }
                        </Text>
                    </View>
                    <View style={styles.botHeng}></View>
                </View>
                {
                    detail?.imgUrlList?.length > 0 && (
                        <View style={styles.activitydescription}>
                            <View style={styles.activityDescTitle}>
                                <Text style={styles.activityDescTitleText}>
                                    社群图片
                                </Text>
                                <View style={[styles.activityTitleHeng, { width: '社群图片'.length * 16 }]}></View>
                            </View>
                            <View style={{ paddingHorizontal: 12, }}>
                                {
                                    detail?.imgUrlList && (
                                        detail?.imgUrlList.map((item: any, index: number) => {
                                            return (
                                                <AutoHeightImage fixedWidth={scaleSize(351)} uri={item} />
                                            )
                                        })
                                    )
                                }
                            </View>
                            {/*<View style={styles.botHeng}></View>*/}
                        </View>
                    )
                }

                {
                    detail?.founderIntroduce && (
                        <View style={styles.activitydescription}>
                            <View style={styles.activityDescTitle}>
                                <Text style={styles.activityDescTitleText}>
                                    创始人简介
                                </Text>
                                <View style={[styles.activityTitleHeng, { width: '创始人简介'.length * 16 }]}></View>
                            </View>
                            <View style={{ paddingHorizontal: 12, }}>
                                <Text style={styles.activityDes}>
                                    { detail?.founderIntroduce }
                                </Text>
                            </View>
                            {/*<View style={styles.botHeng}></View>*/}
                        </View>
                    )
                }
                {
                    detail?.requirement && (
                        <View style={styles.activitydescription}>
                            <View style={styles.activityDescTitle}>
                                <Text style={styles.activityDescTitleText}>
                                    加入资格
                                </Text>
                                <View style={[styles.activityTitleHeng, { width: '加入资格'.length * 16 }]}></View>
                            </View>
                            <View style={{ paddingHorizontal: 12, }}>
                                <Text style={styles.activityDes}>
                                    { detail?.requirement }
                                </Text>
                            </View>
                            {/*<View style={styles.botHeng}></View>*/}
                        </View>
                    )
                }
                {/*<View style={{ marginBottom: 12, }}>*/}
                {/*    <Image source={demoImg} style={{ width: "100%", height: 400, borderRadius: 4 }} />*/}
                {/*</View>*/}
                {/*<View>*/}
                {/*    <Image source={demo1} style={{ width: "100%", height: 400, borderRadius: 4 }} />*/}
                {/*</View>*/}
            </View>
        </ScrollView>

    )
};

export default introComponent;

const styles = StyleSheet.create({
    introDescrtion: {
      flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#fff",
        borderRadius: 6,
        paddingVertical: 8,
        paddingHorizontal: 10,
        flex: 1,
        marginBottom: 10,
        shadowColor: '#000',                // 阴影颜色
        shadowOffset: { width: 0, height: 3 }, // 阴影偏移，分别对应 x 和 y 轴
        shadowOpacity: 0.05,                // 阴影透明度
        shadowRadius: 8,                    // 模糊半径
        elevation: 3,                       // Android 阴影效果
    },
    header: {
        flexDirection: "row",
        flex: 1,
    },
    headerTag: {
        backgroundColor: "#EC6138",
        borderRadius: 3,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        paddingVertical: 3,
        paddingHorizontal: 4,
        marginRight: 3,

    },
    headerTagText: {
        fontSize: 8,
        color: "#fff",
    },
    title: {
        marginRight: 4,
    },
    activitydescription: {
        // paddingHorizontal: 12,
        paddingTop: 16,
    },
    activityDescTitle: {
        position: "relative",
        zIndex: 2,
        marginBottom: 8,
        marginHorizontal: 12,
    },
    activityDescTitleText: {
        fontSize: 16,
        color: "#2A2B30",
        fontWeight: "bold",
    },
    activityTitleHeng: {
        width: 64,
        height: 6,
        position: "absolute",
        bottom: 0,
        zIndex: -1,
        backgroundColor: "rgba(236,97,56,1)"
    },
    activityDes: {
        fontSize: 14,
        color: "#676978",
    },
    botHeng: {
        paddingBottom: 14,
        borderBottomWidth: 6,
        borderColor: "#F7F7F7",
    },
})
